<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
   
</style>
<body>
    <div id="app">
        <input v-model="good" type="text" @keyup.13="jsonp">
        <button @click='jsonp'>jsonp</button>
        <ul>
            <li v-for="(item,index) in result" :key="index">{{index+1}}、{{item[0]}}</li>
        </ul>
    </div>
    <script src="./base/vue.js"></script>   
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
    <script>

    // http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb
    // jsonp   json  with padding   
    // jsonp主要用来解决跨域问题？ jsonp原理是什么？
    // script标签是可以跨域的 
    // 内部动态创建script标签，然后标签的src属性连接你所请求的url地址，然后服务端会把数据传递给一个指定的回调函数，
    // 前端只需要写一个一模一样的函数体，内部参数就是服务端传递来的数据。
    // 最大的缺点是什么？  它只支持get请求，不支持post请求！


    // post请求解决跨域，通过什么方案？  绝大多数会让后端帮助我们去配置   Access-Origin-  : "*"
    // 可以通过代理的方式实现跨域问题
    // 项目上线的时候   属于同一个域名端口下面，不存在跨域问题。


    var vm = new Vue({
        el:"#app",
        data:{
            result:[],
            good:""
        },
        methods:{
            jsonp(){
                this.$http.jsonp("http://suggest.taobao.com/sug?code=utf-8",{
                    params:{
                        q:this.good
                    }
                }).then(res=>{
                    console.log(res.body.result)
                    this.result = res.body.result;
                    this.good = ""
                })
            }
        }
    })
      
 
    </script>
</body>
</html>